<template>
  <div class="checkin-page">
    <div class="checkin-calendar">
      <div class="month-title">
        <div class="dot"></div>
        <span>{{ t("user-checkin_langkahBulanan") }}</span>
      </div>

      <div class="week-days">
        <div class="day-item" v-for="(day, index) in weekDays" :key="index">
          {{ day }}
        </div>
      </div>

      <div class="calendar-dates">
        <div
          class="week-row"
          v-for="(week, weekIndex) in calendarDays"
          :key="weekIndex"
        >
          <div
            v-for="(day, dayIndex) in week"
            :key="dayIndex"
            class="date-item"
            :class="{
              active: isCheckedDate(day),
              current: day === currentDate,
            }"
          >
            <span> {{ day || "" }}</span>
          </div>
        </div>
      </div>

      <div class="checkin-progress">
        <div class="progress-text">
          {{ t("user-checkin_absenTotal") }}
          <span class="highlight"
            >{{ totalDays }} {{ t("products_day") }}
          </span>
          {{ t("user-checkin_untukMendapatkanHadiah") }}
        </div>
        <div class="progress-container">
          <div class="progress-bar">
            <div
              class="progress-filled"
              :style="{ width: progressWidth }"
            ></div>
            <div class="progress-text-overlay">
              {{ completedDays }} {{ t("products_day") }}
            </div>
          </div>
          <div
            :class="completedDays >= totalDays ? 'gift-icon1' : 'gift-icon'"
            @click="completedDays >= totalDays && claimReward()"
          ></div>
        </div>
      </div>

      <div class="checkin-button" @click="doCheckin">
        {{ t("user-checkin_absenHarian") }}
      </div>
    </div>

    <div class="history-section">
      <div class="history-title">
        <div class="bar"></div>
        {{ t("user-checkin_riwayatAbsen") }}
      </div>

      <div class="history-list">
        <div
          class="history-item"
          v-for="(item, index) in checkinHistory"
          :key="index"
          :class="{ 'special-history': item.isSpecial }"
          @click="item.isSpecial && showRewardModal(item)"
        >
          <div class="history-time">
            <div class="time">{{ item.time }}</div>
            <div class="date">{{ item.date }}</div>
          </div>
          <div class="history-content">
            <div class="history-type">{{ item.type }}</div>
            <div
              class="history-desc"
              :class="{ 'special-desc': item.isSpecial }"
            >
              {{ item.desc }}
            </div>
          </div>
          <div class="history-status">
            <div v-if="item.isSpecial" class="star-icon-container">★</div>
            <div v-else class="check-icon">✓</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 签到完成弹窗 -->
    <div class="checkin-modal" v-if="showCompletionModal">
      <div class="modal-content">
        <div class="modal-title">{{ t("user-checkin_selamatYa") }}</div>
        <div class="modal-star">
          <img src="@/assets/images/gift3.png" alt="Star" />
        </div>
        <div class="modal-count">1 <span class="star-icon">★</span></div>
        <div class="modal-button" @click="closeModal">
          {{ t("user-checkin_sayaMengerti") }}
        </div>
        <div class="modal-close" @click="closeModal">
          <van-icon name="cross" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";

const isCheckedIn = ref(false);
const completedDays = ref(5); // 默认已签到5天
const totalDays = ref(7); // 总共需要7天
const progressWidth = ref("0%");
const { t } = useI18n();
// 星期几
const weekDays = [
  t("user-checkin_minggu"),
  t("user-checkin_senin"),
  t("user-checkin_selasa"),
  t("user-checkin_rabu"),
  t("user-checkin_kamis"),
  t("user-checkin_jumat"),
  t("user-checkin_sabtu"),
];

// 当前日期计算
const now = new Date();
const currentDay = now.getDay(); // 0-6, 0代表星期日
const currentDate = ref(now.getDate());
const currentMonth = now.getMonth();
const currentYear = now.getFullYear();

// 签到日期 - 硬编码为图片中显示的签到日期
const checkinDates = ref([15, 19, 21, 22, 23]);

// 在script部分添加接口定义
interface CheckinHistoryItem {
  time: string;
  date: string;
  type: string;
  desc: string;
  isSpecial?: boolean;
}

// 更新checkinHistory的类型，默认没有特殊记录
const checkinHistory = ref<CheckinHistoryItem[]>([
  {
    time: "10:32",
    date: "24/04",
    type: t("user-checkin_absenHarian"),
    desc: "-",
  },
  {
    time: "15:16",
    date: "23/04",
    type: t("user-checkin_absenHarian"),
    desc: "-",
  },
  {
    time: "16:59",
    date: "22/04",
    type: t("user-checkin_absenHarian"),
    desc: "-",
  },
  {
    time: "15:36",
    date: "21/04",
    type: t("user-checkin_absenHarian"),
    desc: "-",
  },
  {
    time: "11:09",
    date: "20/04",
    type: t("user-checkin_absenHarian"),
    desc: "-",
  },
  {
    time: "14:23",
    date: "19/04",
    type: t("user-checkin_absenHarian"),
    desc: "-",
  },
]);

// 计算当月的日历
const calendarDays = computed(() => {
  // 获取当月第一天
  const firstDay = new Date(currentYear, currentMonth, 1);
  // 获取当月第一天是星期几 (0-6)
  const firstDayOfWeek = firstDay.getDay();
  // 获取当月天数
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  // 构建日历数组
  const calendar = [];
  let week = Array(7).fill(null);

  // 填充第一周前面的空白
  for (let i = firstDayOfWeek; i < 7; i++) {
    week[i] = i - firstDayOfWeek + 1;
  }
  calendar.push([...week]);

  // 填充剩余的周
  let dayCounter = 7 - firstDayOfWeek + 1;
  while (dayCounter <= daysInMonth) {
    week = Array(7).fill(null);
    for (let i = 0; i < 7 && dayCounter <= daysInMonth; i++) {
      week[i] = dayCounter++;
    }
    calendar.push([...week]);
  }

  return calendar;
});

// 计算进度
const progress = computed(() => {
  return Math.min((completedDays.value / totalDays.value) * 100, 100);
});

// 检查日期是否已签到
const isCheckedDate = (day: number | null) => {
  return day && checkinDates.value.includes(day);
};

// 弹窗控制
const showCompletionModal = ref(false);

onMounted(() => {
  getCheckinStatus();
  // 延迟显示进度条动画
  setTimeout(() => {
    progressWidth.value = `${progress.value}%`;
  }, 300);
});

function getCheckinStatus() {
  // 获取签到状态
  // 此处可调用API获取实际签到状态
  // 这里使用硬编码数据模拟
}

// 添加点击累计签到记录显示弹窗的函数
function showRewardModal(item: CheckinHistoryItem) {
  if (item.isSpecial) {
    showCompletionModal.value = true;
  }
}

// 关闭弹窗
function closeModal() {
  showCompletionModal.value = false;
}

// 添加特殊记录和显示弹窗的函数
function claimReward() {
  if (completedDays.value >= totalDays.value) {
    // 显示弹窗
    showCompletionModal.value = true;

    // 检查是否已经有特殊记录
    const hasSpecialRecord = checkinHistory.value.some(
      (item) => item.isSpecial,
    );

    // 如果没有特殊记录，添加一条
    if (!hasSpecialRecord) {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const month = (now.getMonth() + 1).toString().padStart(2, "0");

      // 添加累计签到记录到历史列表
      checkinHistory.value.unshift({
        time: `${hours}:${minutes}`,
        date: `${day}/${month}`,
        type: t("user-checkin_absenAkumulatif"),
        desc: t("user-checkin_dapatkanHadiah"),
        isSpecial: true,
      });
    }
  }
}

// 修改函数doCheckin，移除添加特殊记录的逻辑
function doCheckin() {
  // 执行签到
  if (!isCheckedIn.value) {
    isCheckedIn.value = true;

    // 添加今天的日期到签到列表
    if (!isCheckedDate(currentDate.value)) {
      checkinDates.value.push(currentDate.value);

      // 添加到签到历史
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const month = (now.getMonth() + 1).toString().padStart(2, "0");

      checkinHistory.value.unshift({
        time: `${hours}:${minutes}`,
        date: `${day}/${month}`,
        type: t("user-checkin_absenHarian"),
        desc: "-",
      });

      // 更新进度（确保最多是7天）
      if (completedDays.value < totalDays.value) {
        completedDays.value++;
        progressWidth.value = `${progress.value}%`;
      }
    }
  }
}
</script>

<style scoped>
.checkin-page {
  min-height: 100vh;
  overflow: hidden;
  padding: 0 0 0 0;
  font-size: 17px;
  color: #f6eade;
  background: url("@/assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}

.checkin-calendar {
  background-color: rgba(254, 242, 230, 0.15);
  margin: 17px 17px;
  padding: 5px 0;
  border-radius: 5px;
}

.month-title {
  font-size: 16px;
  text-align: center;
  margin-bottom: 11px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.month-title .dot {
  background-color: rgb(153, 153, 153);
  width: 5px;
  height: 5px;
  border-radius: 2px;
  margin-right: 8px;
}

.week-days {
  width: 361px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: initial;
  color: #872b2c;
}

.day-item {
  width: calc(361px / 7);
  text-align: center;
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  color: #f6eade;
}

.calendar-dates {
  width: 361px;
  margin: 0 auto;
}

.week-row {
  display: flex;
  justify-content: space-between;
}

.date-item {
  width: calc(100% / 7);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.date-item.active span {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 13px;
  background-color: hsla(0, 0%, 60%, 0.3);
}

.date-item.current {
  color: red;
  border-radius: 50%;
}

.checkin-progress {
  margin: 0px 17px;
  border: 0.5px solid rgba(153, 153, 153, 0.3);
  padding: 10px 11px;
  border-radius: 8px;
  background-color: rgba(254, 242, 230, 0.05);
}

.progress-text {
  font-size: 13px;
  color: rgb(153, 153, 153);
  margin-top: 5px;
}

.progress-text .highlight {
  color: red;
  font-weight: 600;
}

.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-bar {
  width: 90%;
  height: 12px;
  background: #ececec;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.progress-filled {
  height: 100%;
  background: green;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-text-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 10px;
  color: #ffffff;
  padding-left: 6px;
}

.gift-icon {
  width: 25px;
  height: 25px;
  padding: 0px;
  font-size: 20px;
  margin-left: 5px;
  background-image: url("@/assets/images/gift1.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.gift-icon1 {
  width: 25px;
  height: 25px;
  padding: 0px;
  font-size: 20px;
  margin-left: 5px;
  background-image: url("@/assets/images/gift3.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
  position: relative;
}

.gift-icon1:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.gift-icon1:active {
  transform: scale(0.95);
}

/* 添加提示标记 */
.gift-icon1::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

.checkin-button {
  height: 44px;
  line-height: 44px;
  border-radius: 8px;
  margin: 0 auto;
  background:
    linear-gradient(270deg, #fee5cf, #dfb695 50%, #fee5cf),
    linear-gradient(180deg, #af917f 2%, #a9836b 99%);
  margin-bottom: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #0c1f26;
  margin: 17px;
}

.history-section {
  margin: 0 16px;
}

.history-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.history-title .bar {
  width: 4px;
  height: 16px;
  background-color: #f6eade;
  margin-right: 8px;
}

.history-list {
}

.history-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.history-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 12px;
  min-width: 40px;
}

.history-time .time {
  font-size: 14px;
  color: #f6eade;
  margin-bottom: 2px;
}

.history-time .date {
  font-size: 12px;
  color: rgba(246, 234, 222, 0.6);
}

.history-content {
  flex: 1;
  border-left: 1px dashed rgba(246, 234, 222, 0.3);
  padding-left: 12px;
}

.history-type {
  font-size: 14px;
  color: #f6eade;
  margin-bottom: 4px;
}

.history-desc {
  font-size: 12px;
  color: rgba(246, 234, 222, 0.6);
}

.history-status {
  margin-left: 12px;
}

.check-icon {
  width: 24px;
  height: 24px;
  background: #33cc33;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
}

/* 弹窗样式 */
.checkin-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  width: 80%;
  max-width: 300px;
  background-color: #fff5e9;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  position: relative;
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.modal-star {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  animation: pulse 1.5s infinite;
}

.modal-star img {
  width: 100%;
  height: 100%;
}

.modal-count {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

.star-icon {
  color: #ffd700;
  font-size: 20px;
}

.modal-button {
  width: 80%;
  margin: 0 auto;
  background-color: #e9d3b3;
  color: #523726;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 特殊历史记录样式 */
.history-item.special-history {
  background-color: rgba(139, 0, 0, 0.5);
  border-radius: 4px;
  padding: 8px 12px;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.history-item.special-history:hover {
  background-color: rgba(139, 0, 0, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.special-desc {
  color: #ffd700 !important;
}

.star-icon-container {
  width: 24px;
  height: 24px;
  background: #ffd700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 16px;
  font-weight: bold;
}
</style>
